<style>
.attachmentDoc .attachmentDoc_top .el-input__inner {
  width: 160px;
  height: 30px;
}
.attachmentDoc .attachmentDoc_top .el-input {
  width: 160px;
  height: 30px;
  /* margin: 14px 0px 0 0; */
}
.el-icon-success,
.el-icon-delete {
  margin-right: 7px;
}
.attachmentDoc .el-button {
  padding: 8px 15px;
  margin-right: 12px;
  height: 30px;
}
.attachmentDoc .el-button + .el-button {
  margin-left: 0;
}
</style>

<style scoped>
.attachmentDoc {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.attachmentDoc_top {
  height: 60px;
  display: flex;
  white-space: nowrap;
  border-bottom: 2px solid #f4f4f4;
  padding-top: 15px;
}
.attachmentDoc_w {
  padding: 2px 6px 0 0;
  /* margin-top: 15px; */
  /* color: #757575; */
}
.l {
  margin-left: 16px;
}
.attachmentDoc_button {
  margin: 15px 0;
  white-space: nowrap;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
</style>

<template>
  <!-- 附件建档 -->
  <div class="attachmentDoc">
    <div class="attachmentDoc_top">
      <p class="attachmentDoc_w">附件编号</p>
      <el-input ref="inp1" v-model="no"></el-input>
      <p class="attachmentDoc_w l">附件</p>
      <el-input
        ref="inp2"
        v-model="name"
        @keyup.enter.native="preservation"
      ></el-input>
    </div>
    <!-- 按钮 -->
    <div class="attachmentDoc_button">
      <el-button
        @click="preservation"
        type="primary"
        icon="el-icon-folder-checked"
        >保存</el-button
      >
      <el-button
        @click="
          () => {
            this.exp()
          }
        "
        icon="el-icon-upload2"
        >导出</el-button
      >
      <el-button @click="dele" icon="el-icon-delete">删除</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      id="outTable"
      :on-change="handleChange"
      :on-remove="handleRemove"
      style="width: 100%"
      height="68.8vh"
      highlight-current-row
      @row-click="rowClick"
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
    >
      <el-table-column prop="no" label="附件编号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="附件"> </el-table-column>
      <!-- <el-table-column
        prop="status"
        label="">
      </el-table-column>
      <el-table-column
        prop="softwareCustomerId"
        label="">
      </el-table-column> -->
    </el-table>
    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
import {
  getAttachment,
  postAttachment,
  deleteAttachment,
  putAttachment
} from '../../../network/attachment'
import footView from '../../../components/FootView'
import enterUp from '../../../components/mixins/enterUp'
import outex from '../../../components/mixins/outexp'
export default {
  name: 'attachmentDoc',
  mixins: [enterUp, outex],
  created() {
    this.inpList = this.getInput()
    this._getAttachment()
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
  },
  components: {
    footView
  },
  data() {
    return {
      inpList: [],
      tableData: [],
      no: '',
      name: '',
      id: '',
      jxQuarter: null
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  methods: {
    //请求数据
    _getAttachment() {
      getAttachment().then((res) => {
        console.log(res.data)
        this.tableData = res.data.data
        this.no = ''
        this.id = ''
        this.name = ''
      })
    },
    //保存 添加
    preservation() {
      if (this.no == '' || this.name == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '附件编号和附件不能为空'
        })
        return
      }
      this.$refs.inp2.blur()
      var obj = {
        no: this.no,
        id: this.id,
        name: this.name
      }
      var obj1 = { no: this.no, name: this.name }
      for (const i of this.tableData) {
        if (i.no == this.no) {
          //修改
          this.$confirm('是否修改此附件编号的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              putAttachment(obj)
                .then((res) => {
                  this._getAttachment()
                })
                .catch((err) => {
                  console.log(err)
                })
              this.$message({
                type: 'success',
                offset: 400,
                message: '修改成功!'
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                offset: 400,
                message: '已取消修改'
              })
            })
          return
        }
      }
      postAttachment(obj1).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            offset: 400,
            message: '添加成功'
          })
          this.$refs.inp1.focus()
          this._getAttachment()
        } else {
          this.$message.error({
            offset: 400,
            message: '添加失败'
          })
        }
      })
      // }
    },
    //删除
    dele() {
      if (this.id == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选择要删除的数据'
        })
        return
      }
      var obj = { id: this.id }
      this.$confirm('是否删除此附件编号的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAttachment(obj).then((res) => {
            console.log(res.data)
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                offset: 400,
                message: '删除成功!'
              })
            } else if (res.data.code == 204) {
              this.$message.error({
                offset: 400,
                message: '删除失败，该条数据有关联数据'
              })
            } else {
              this.$message.error({
                offset: 400,
                message: '删除失败'
              })
            }
            this._getAttachment()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            offset: 400,
            message: '已取消删除'
          })
        })
    },

    rowClick(e) {
      this.id = e.id
      this.no = e.no
      this.name = e.name
    },

    handleChange(file, fileList) {
      this.fileTemp = file.raw
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          this.fileTemp.type == 'application/vnd.ms-excel'
        ) {
          this.importfxx(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            offset: 400,
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请上传附件！'
        })
      }
    },
    handleRemove(file, fileList) {
      this.fileTemp = null
    }
  }
}
</script>
